<template>
  <div class="min-h-screen bg-gradient-to-br from-slate-50 to-indigo-50 dark:from-gray-900 dark:to-black px-4 py-24">
    <div class="max-w-5xl mx-auto">

      <!-- 顶部余额卡片 -->
      <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 p-6 mb-8">
        <div class="flex items-center justify-between">
          <div>
            <div class="text-sm text-gray-500 dark:text-gray-400">账户余额</div>
            <div class="text-3xl font-extrabold text-indigo-600 dark:text-indigo-400">{{ balance }}</div>
          </div>
          <div class="flex gap-3">
            <button @click="tab = 'recharge'" class="px-4 py-2 rounded-lg bg-indigo-600 text-white text-sm font-semibold hover:bg-indigo-700 transition">充值</button>
            <button @click="tab = 'record'" class="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 text-sm font-semibold hover:bg-gray-100 dark:hover:bg-gray-700 transition">消费记录</button>
          </div>
        </div>
      </div>

      <!-- Tab 切换 -->
      <div class="flex gap-4 border-b border-gray-200 dark:border-gray-700 mb-6">
        <button v-for="t in tabs" :key="t.key" @click="tab = t.key" class="pb-2 px-1 text-sm font-semibold transition" :class="tab === t.key ? 'text-indigo-600 border-b-2 border-indigo-600' : 'text-gray-500 hover:text-indigo-600'">
          {{ t.label }}
        </button>
      </div>

      <!-- 商品列表 -->
      <div v-if="tab === 'shop'" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        <div v-for="item in shopList" :key="item.id" class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white/60 dark:bg-gray-800/60 p-5 flex flex-col">
          <div class="flex-1">
            <h3 class="font-bold text-gray-800 dark:text-gray-100">{{ item.name }}</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">{{ item.desc }}</p>
            <div class="mt-3 text-xs text-gray-500 dark:text-gray-400">库存：{{ item.stock > 0 ? item.stock : '已售罄' }}</div>
          </div>
          <div class="flex items-center justify-between mt-4">
            <span class="text-indigo-600 dark:text-indigo-400 font-bold">{{ item.price }} 币</span>
            <button
              @click="buy(item)"
              :disabled="item.stock === 0 || balance < item.price"
              class="px-4 py-2 rounded-lg bg-indigo-600 text-white text-sm font-semibold hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed transition"
            >
              购买
            </button>
          </div>
        </div>
      </div>

      <!-- 充值面板 -->
      <div v-if="tab === 'recharge'" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <div v-for="p in packs" :key="p.id" @click="selectedPack = p.id" class="rounded-xl border p-4 cursor-pointer transition" :class="selectedPack === p.id ? 'border-indigo-500 bg-indigo-50 dark:bg-indigo-900/20' : 'border-gray-200 dark:border-gray-700 hover:shadow'">
          <div class="text-2xl font-bold text-indigo-600">{{ p.coin }}</div>
          <div class="text-sm text-gray-500">海龟币</div>
          <div class="mt-2 text-lg font-semibold">¥{{ p.money }}</div>
          <div v-if="p.tag" class="text-xs text-indigo-600 mt-1">{{ p.tag }}</div>
        </div>
        <div class="sm:col-span-2 lg:col-span-4 text-center mt-4">
          <button @click="toPay" :disabled="!selectedPack" class="px-8 py-3 bg-gradient-to-r from-indigo-600 to-purple-600 text-white rounded-lg shadow-md hover:shadow-lg disabled:opacity-50 transition transform hover:-translate-y-0.5">
            立即充值
          </button>
        </div>
      </div>

      <!-- 消费记录 -->
      <div v-if="tab === 'record'">
        <div v-if="records.length" class="space-y-3">
          <div v-for="r in records" :key="r.id" class="rounded-lg border border-gray-200 dark:border-gray-700 px-4 py-3 flex items-center justify-between">
            <div>
              <div class="font-medium">{{ r.item }}</div>
              <div class="text-xs text-gray-400">{{ r.date }}</div>
            </div>
            <span :class="r.type === 'consume' ? 'text-red-600' : 'text-green-600'" class="font-semibold">
              {{ r.type === 'consume' ? '-' : '+' }}{{ r.amount }} 币
            </span>
          </div>
        </div>
        <div v-else class="text-center text-gray-400 py-6">暂无记录</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, } from 'vue'

/* ---------- 余额 ---------- */
const balance = ref(1200) // 可从 pinia / localStorage 读

/* ---------- Tab ---------- */
const tab = ref('shop') // shop | recharge | record
const tabs = [
  { key: 'shop', label: '商城' },
  { key: 'recharge', label: '充值' },
  { key: 'record', label: '记录' }
]

/* ---------- 商品 ---------- */
const shopList = ref([
  { id: 1, name: '提示券', desc: '兑换后获得 3 次额外提示机会', price: 30, stock: 99 },
  { id: 2, name: '改名卡', desc: '修改一次用户名', price: 100, stock: 10 },
  { id: 3, name: '错题本扩容', desc: '增加 50 条错题容量', price: 60, stock: 50 },
  { id: 4, name: '午夜挑战券', desc: '进入凌晨专属题库一次', price: 20, stock: 0 },
  { id: 5, name: '好友对战房卡', desc: '创建 1 间好友对战房', price: 15, stock: 200 },
  { id: 6, name: '会员 7 天券', desc: '免费领取 7 天会员（限 1 次）', price: 0, stock: 1 }
])

/* ---------- 充值套餐 ---------- */
const packs = ref([
  { id: 1, coin: 100, money: 10, tag: '入门' },
  { id: 2, coin: 300, money: 28, tag: '特惠' },
  { id: 3, coin: 500, money: 45, tag: '畅销' },
  { id: 4, coin: 1000, money: 88, tag: '超值' }
])
const selectedPack = ref(null)

/* ---------- 消费记录 ---------- */
const records = ref([
  { id: 1, item: '提示券 ×3', amount: 30, type: 'consume', date: '2025-06-01 10:20' },
  { id: 2, item: '充值 100 币', amount: 100, type: 'recharge', date: '2025-05-30 18:00' }
])

/* ---------- 购买 ---------- */
function buy(item) {
  if (item.stock === 0 || balance.value < item.price) return
  // 扣款 & 减库存
  balance.value -= item.price
  item.stock--
  // 写记录
  records.value.unshift({
    id: Date.now(),
    item: item.name,
    amount: item.price,
    type: 'consume',
    date: new Date().toLocaleString('zh-CN')
  })
  localStorage.setItem('shop_records', JSON.stringify(records.value))
  localStorage.setItem('user_balance', balance.value)
  alert(`兑换成功！已获得 ${item.name}`)
}

/* ---------- 充值 ---------- */
function toPay() {
  if (!selectedPack.value) return
  const p = packs.value.find(i => i.id === selectedPack.value)
  // 模拟支付
  balance.value += p.coin
  records.value.unshift({
    id: Date.now() + 1,
    item: `充值 ${p.coin} 币`,
    amount: p.coin,
    type: 'recharge',
    date: new Date().toLocaleString('zh-CN')
  })
  localStorage.setItem('shop_records', JSON.stringify(records.value))
  localStorage.setItem('user_balance', balance.value)
  alert(`充值成功！已获得 ${p.coin} 海龟币`)
}
</script>